<template>
	<view class="tabs-wrap adup-route-bz">
		<u-form :model="fm.ps" :ref="fm.fname" :rules="rules" :error-type="['toast']">
			<view class="my-fm" :style="{'padding-top': '0rpx'}">
				<view class="f-item no-box" :style="{'padding-top': '85rpx'}">
					<view class="f-item-title"
						:style="{'position': 'fixed', 'top': '-4rpx', 'width': 'calc(100% - 50rpx)', 'padding-left': '20rpx'}">
						<label class="r-l-icon" :style="{'background': '#ff6300', 'left': '0rpx'}"></label>
						线上派车
						<view class="r-r-con">

							<u-button :hover-class="'none'" :custom-style="fm.sb.cancleBtnSy" @click="closeMd">
								<u-icon name="arrow-leftward" color="#ff6300"></u-icon>返回
							</u-button>
							<u-button :ripple="true" :hover-class="'none'" :custom-style="fm.sb.okBtnSty"
								:loading="fm.sb.load" @click="submitFm">
								<u-icon name="search" color="#fff"></u-icon>搜索
							</u-button>

						</view>
					</view>
					<u-form-item>
						<u-dropdown ref="uDropdown">
							<!-- <u-dropdown-item v-model="fm.find.plateNum" title="车牌"
								:options="options1"></u-dropdown-item> -->
							<u-dropdown-item title="车牌" v-model="fm.find.plateNum">
								<view class="slot-content" style="background-color: #FFFFFF;">
									<scroll-view scroll-y="true" style="height: 500rpx;">
										<view :style="fm.find.plateNum ==item.value?'background-color: #00C3CE;':'' "
											@click="options1_btn(item.value)" v-for="item in options1" :key="item.value"
											class=" u-content-color u-m-t-20 u-m-b-20">{{item.value}}</view>
									</scroll-view>

								</view>
							</u-dropdown-item>
							<u-dropdown-item v-model="fm.find.driverUserIdIsNull" title="有无主驾"
								:options="options2"></u-dropdown-item>
							<u-dropdown-item v-model="fm.find.fastCondition" title="排序条件"
								:options="options3"></u-dropdown-item>
						</u-dropdown>
					</u-form-item>
					<u-form-item>
						<view class="i-row">
							<view class="r-title">座位数:</view>
							<view class="r-con">
								<u-input v-model="fm.find.seats" :type="'number'" :input-align="'right'"
									:clearable="false" :custom-style="{'color': '#00C3CE'}" placeholder="请输入座位数" />
								<label class="i-r-text">座</label>
							</view>
						</view>
					</u-form-item>

					<u-form-item>
						<view class="my-list"
							style="height:75vh;width: 100%;overflow: auto;min-height: 75vh;background-color: #EFEFEF; ">
							<template v-if="findComboCusList.length>0">
								<view style="" class="ml-item" v-for="(it, index) in findComboCusList" :key="it.id">
									<view class="i-title-row">
										<view class="r-title" style="color: red;">{{it.remark}}</view>
										<view class="r-detail-btn" @click="showBzDetail(it)">详情
											<u-icon name="arrow-right" color="#666"></u-icon>
										</view>

									</view>
									<view style='height: 60rpx;' class="i-row">
										<view class="r-title">车牌号：</view>
										<view class="r-it">【{{it.seats}}座】{{it.plateNum}}<text style="color: red;"
												v-if="it.isRestricted">(限号)</text>
										</view>
									</view>
									<view style='height: 60rpx;' class="i-row">
										<view class="r-title">驾驶员：</view>
										<view class="r-it">{{it.driverName?it.driverName+'-'+it.driverPhone:''}}</view>
									</view>
									<view class="bottom">
										<view :style="{'border-color': '#f00000', 'color': '#f00000'}" class="btn"
											@click="btn_car(it)">
											派车
										</view>

									</view>

								</view>

							</template>
							<template v-if="findComboCusList.length==0">
								<u-divider color="red">没有数据</u-divider>
							</template>
						</view>
					</u-form-item>



				</view>
			</view>
		</u-form>

		<u-modal show-cancel-button="true" v-model="show" :content="'确认派车?'" @confirm="ok_Btn"></u-modal>
	</view>
</template>

<script>
	export default {
		name: "offline-vehicle-dispatch",


		data() {
			return {
				objdata: {},
				show: false,
				findComboCusList: [],
				options1: [],
				options2: [{
						label: '没有驾驶员',
						value: 0,
					},
					{
						label: '有驾驶员',
						value: 1,
					},
				],
				options3: [{
						label: '月用金(工资)升序',
						value: 0,
					},
					{
						label: '评分最高降序',
						value: 1,
					},
					{
						label: '最快达到',
						value: 2,
					},
				],
				id: '',
				// 维修详情输入框样式
				inpBtnStyl: {
					'color': '#00C3CE',
					'padding-right': '30rpx'
				},

				// 表单对象
				fm: {
					fname: 'offlinevehicledispatch',
					sb: {
						load: false,
						text: '添加',
						okBtnSty: {
							'background-color': '#00C3CE',
							'color': '#FFFFFF',
							'margin-left': '10rpx',
							'height': '66rpx',
							'font-size': '30rpx',
							'padding': '0 20rpx',
						},
						cancleBtnSy: {
							'color': '#ff6300',
							'margin-left': '10rpx',
							'height': '66rpx',
							'font-size': '30rpx',
							'padding': '0 20rpx',
						}
					},
					// 参数对象
					ps: {
						carcompen: '',
						carName: '',
						carphone: '',

						ids: '',
						carCompanyId: '',
						carDutyUserId: '',
						driverName: '',
						driverPhone: '',
						outPrice: '',
						plateNum: '',

					},
					find: {
						ids: [],
						best: false,
						endPoint: true,
						startPoint: false,
						startTime: '',
						seats: '7',
						plateNum: '',
						fastCondition: 2,
						driverUserIdIsNull: 1,
					},

				},


			}
		},




		onLoad(e) {
			let that = this
			that.id = e.id
			that.fm.find.seats = e.seats <= 5 ? '7' : e.seats
			that.fm.find.ids = [e.id]
			that.fm.find.startTime = e.startTime
			let ps = that.fm.find
			that.$u.api.findCarCombo({
				page: {
					pageNum: 1,
					pageSize: 999,
				},
				plateNum: '',
			}).then(res => {
				if (res.code == 1) {
					let arr = []
					for (let i = 0; i < res.data.list.length; i++) {
						let obj = {
							label: '',
							value: "",
						}
						obj.label = res.data.list[i].plate_num
						obj.value = res.data.list[i].plate_num
						arr.push(obj)
					}
					that.options1 = arr
					console.log(that.options1)
					that.$u.api.filterCar2(ps).then(res => {
						if (res.code == 1) {
							that.findComboCusList = res.data
						} else {
							that.findComboCusList = []
						}
					})
				} else {
					U.qerror(res.msg);
				}
			})


		},
		methods: {
			options1_btn(e) {
				this.fm.find.plateNum = e
				this.$refs.uDropdown.close();
				this.submitFm()
			},
			// 关闭弹框
			closeMd() {
				uni.navigateBack({
					delta: 1
				});
			},
			showBzDetail(e) {
				uni.setStorageSync('dataobj', e);
				uni.navigateTo({
					url: '/order-man/charter-a-car/unassigned-vehicles/detail'
				})
			},

			submitFm() {
				let that = this
				let ps = that.fm.find
				that.$u.api.filterCar2(ps).then(res => {
					if (res.code == 1) {
						that.findComboCusList = res.data
					} else {
						that.findComboCusList = []
					}
				})
			},
			btn_car(e) {
				let that = this
				that.objdata = e
				that.show = true
			},
			ok_Btn() {
				let that = this,
					U = that.U,
					FV = that.FV;
				let data = that.objdata
				let cancelorderId = []
				if (data.orderId) {
					cancelorderId.push(data.orderId)
				}
				if (data.lastOrderId) {
					cancelorderId.push(data.lastOrderId)
				}
				let ps = {
					orderId: that.id,
					plateNum: data.plateNum,
					driverUserId: data.driverUserId,
					cancelNum: '',
					sendPrice: '',
					cancelorderId: cancelorderId.join(','),
				}
				let ids = [that.id]

				that.$u.api.confirmSendOrder({
					ids: ids,
					type: '2',
					sendInfo: [ps],
				}).then(res => {
					if (res.code == 1) {

						let timer = null
						uni.$u.toast(res.msg);
						clearTimeout(timer)
						timer = setTimeout(() => {
							uni.reLaunch({
								url: '/pages/tabbar/order-list/order-list'
							});
							clearTimeout(timer)
						}, 1000)

					} else {
						U.qerror(res.msg);
					}
				})

			},
		}
	}
</script>

<style lang="scss">
	.bottom {
		display: flex;
		margin-top: 20rpx;
		justify-content: flex-end;
		align-items: center;

		.btn {
			line-height: 52rpx;
			padding: 0rpx 16rpx;
			border-radius: 26rpx;
			border: 2rpx solid #ff9900;
			font-size: 26rpx;
			text-align: center;
			color: #ff9900;
			;
			margin-right: 10rpx;
		}

		.more {
			align-self: center;
			flex: 1;
			margin-right: 10rpx;
		}

		.evaluate {
			color: $u-type-warning-dark;
			border-color: $u-type-warning-dark;
		}
	}
</style>